<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('文件上传')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
				<input id="file" type="file" multiple data-show-upload="false">
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
    var prefix = ctx + "form";
    $(document).ready(function () {
    	$("#file").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': prefix+'/uplodeFile',
            showClose:false,
            showCaption: false,    //不显示标题
            showUpload: false,      //不显示上传按钮
            overwriteInitial: false,
            preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示     
            layoutTemplates: { actions: '<div class="file-actions"><div class="file-footer-buttons"><button type="button" class="kv-file-remove btn btn-sm btn-kv btn-default btn-outline-secondary" title="删除文件"><i class="glyphicon glyphicon-trash"></i></button></div></div>'},
            previewFileIconSettings: { // 配置你的文件扩展名对应的图标
                'doc': '<i class="fa fa-file-word-o text-primary"></i>',
                'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                'htm': '<i class="fa fa-file-code-o text-info"></i>',
                'txt': '<i class="fa fa-file-text-o text-info"></i>',
                'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
                'mp3': '<i class="fa fa-file-audio-o text-warning"></i>'    
            },              
            initialPreviewAsData: true
        }).on("fileuploaded", function(event, data) {
            console.log(data);
        });
    });
    function submitHandler() {  	
                	$('#file').fileinput('upload'); //触发插件开始上传。           
                	var parent = window.parent;
                	$.modal.msgReload("保存成功,正在刷新数据请稍后……");
                	$.modal.closeLoading();	
    }
    </script>
</body>
</html>
